<template>
  <div :class="['page-drawersetting',{'page-padding':settingType===wfCode.CUSTOM || settingType===wfCode.MULTIPLEXT}]">
    <PageSetting v-if="settingType===wfCode.MAIN"/>
    <TitleSetting v-if="settingType!==wfCode.MAIN" :nodeInfo="nodeInfo"/>
    <ImportSetting v-if="settingType===wfCode.IMPORT" :nodeInfo="nodeInfo" ref="activeSetting"/>
    <ExportSetting v-if="settingType===wfCode.EXPORT" :nodeInfo="nodeInfo" ref="activeSetting"/>
    <CustomSetting
      v-if="settingType===wfCode.CUSTOM || settingType===wfCode.MULTIPLEXT"
      :nodeInfo="nodeInfo"
      ref="activeSetting"
    />
    <ReuseSetting v-if="settingType===wfCode.MULTIPLEXT" :nodeInfo="nodeInfo" ref="activeSetting"/>
    <CommonSetting v-if="settingType===wfCode.COMMON" :nodeInfo="nodeInfo" ref="activeSetting"/>
    <div class="page-info" v-if="settingType!==wfCode.MAIN && nodeInfo && nodeInfo.systemNode">
      <Collapse>
        <Panel name="info">
          {{nodeInfo.systemNode.name}}
          <p slot="content">{{nodeInfo.systemNode.desc}}</p>
        </Panel>
      </Collapse>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
/**
 * 工作流设置
 * 输入设置
 * 输出设置
 * 新增设置
 * 可复用设置
 * 通用设置
 */
import { wfCode } from 'assets/scripts/code';
import PageSetting from './Setting/PageSetting'; // 工作流的设置面板
import ImportSetting from './Setting/ImportSetting';
import ExportSetting from './Setting/ExportSetting';
import CustomSetting from './Setting/CustomSetting';
import ReuseSetting from './Setting/ReuseSetting';
import CommonSetting from './Setting/CommonSetting';
import TitleSetting from './Setting/TitleSetting';

export default {
  props: ['nodeInfo'],
  components: {
    PageSetting,
    ExportSetting,
    ImportSetting,
    CustomSetting,
    ReuseSetting,
    CommonSetting,
    TitleSetting
  },
  computed: {
    ...mapState({
      settingType: state => state.workflow.settingType
    })
  },
  data () {
    return {
      wfCode: wfCode
    };
  },
  methods: {
    // 更新位置会调用相关接口
    updateNodePosition () {
      if (this.$refs.activeSetting) {
        this.$refs.activeSetting.updateNodeInfo();
      }
    },

    // 设置面板中的参数
    setKeyValue (key, value) {
      if (this.$refs.activeSetting) {
        this.$refs.activeSetting.setKeyValue(key, value);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.page-drawersetting {
  position: relative;
  height: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  &.page-padding{
    padding-bottom: 40px;
  }
  .page-info {
    width: calc(28% - 35px);
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #fff;
  }
}
</style>
